import React from 'react';
import cx from 'classnames';
import {
    Row, Col, Modal, Form,
    Input, InputNumber,
    Icon, Button
} from 'antd';

class ConnectionEdit extends React.Component {
    state = {
        hasPass: false,
        showPass: false,
        passFocus: false
    };

    onOk() {
        this.props.form.validateFields((error, value) => {
            if (!error) {
                this.props.onOk(value);
            }
        });
    }

    onCancel() {
        this.props.onCancel();
        this.props.form.resetFields();
    }

    onPasswordFocus(e) {
        this.setState({
            passFocus: e.target === document.activeElement
        });
    }

    onPasswordChange(rule, value, cb) {
        this.setState({
            hasPass: value && !!value.trim()
        });
        cb();
    }

    showPassword() {
        this.setState({
            showPass: !this.state.showPass
        });
        $('#password').focus();
    }

    render() {
        const col1 = {
            labelCol: {span: 5},
            wrapperCol: {span: 19}
        };
        const col2 = {
            labelCol: {span: 10},
            wrapperCol: {span: 14}
        };
        const {form, data} = this.props;
        const tip = data ? '修改' : '添加';
        const fp = form.getFieldProps;
        const nameProps = fp('name', {
            rules: [
                {required: true, whitespace: true, message: '名称不能为空'},
                {max: 20, message: '名称长度不能超过20'},
                {pattern: /^\w+$/, message: '非法名称'}
            ]
        });
        const hostProps = fp('host', {
            initialValue: '127.0.0.1',
            rules: [{required: true, whitespace: true, message: '地址不能为空'}]
        });
        const portProps = fp('port', {initialValue: 3306});
        const userProps = fp('username', {
            rules: [{required: true, whitespace: true, message: '用户名不能为空'}]
        });
        const passProps = fp('password', {
            // 因为有绑定，Input.onChange事件不可用了
            rules: [{validator: this.onPasswordChange.bind(this)}]
        });
        return (
            <Modal
                title={`${tip}数据库连接`}
                visible={this.props.visible}
                onOk={this.onOk.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Form horizontal form={this.props.form}>
                    <Form.Item label="连接名称：" {...col1} hasFeedback>
                        <Input id="name" {...nameProps}/>
                    </Form.Item>
                    <Row>
                        <Col span="12">
                            <Form.Item label="服务器地址：" {...col2} hasFeedback>
                                <Input {...hostProps}/>
                            </Form.Item>
                        </Col>
                        <Col span="12">
                            <Form.Item label="端口：" {...col2}>
                                <InputNumber {...portProps} min={1024} max={65535}/>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <Form.Item label="用户名：" {...col2}>
                                <Input {...userProps} addonBefore={<Icon type="user"/>}/>
                            </Form.Item>
                        </Col>
                        <Col span="12">
                            <Form.Item label="密码：" {...col2}>
                                <Input.Group
                                    className={cx("ant-search-input", {"ant-search-input-focus": this.state.passFocus})}
                                >
                                    <Input
                                        id="password" {...passProps}
                                        type={this.state.showPass ? "text" : "password"}
                                        onFocus={this.onPasswordFocus.bind(this)}
                                        onBlur={this.onPasswordFocus.bind(this)}
                                        addonBefore={<Icon type="lock"/>}
                                    />
                                    <div className="ant-input-group-wrap">
                                        <Button
                                            className={cx("ant-search-btn", {"ant-search-btn-noempty": this.state.hasPass})}
                                            onClick={this.showPassword.bind(this)}
                                        >
                                            <Icon type={this.state.showPass ? "eye" : "eye-o"}/>
                                        </Button>
                                    </div>
                                </Input.Group>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Form.Item label="默认数据库：" {...col1}>
                        <Col span="15">
                            <Input {...fp('database')/*不需要验证的属性有个名称即可*/}/>
                        </Col>
                        <Col span="9" className="right grey">
                            （点开连接时默认打开）
                        </Col>
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

// Form.create()(xxx)不能少，否则验证不起作用
export default Form.create()(ConnectionEdit);
